<template>
  <div>
    <h1>ref也买你</h1>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <button @click="changname">改name</button>
    <button @click="changnage">改age</button>
    <br>
    <h1>岗位{{person.type}}</h1>
    <h1>工资{{person.salary}}</h1>
    <button @click="changesalary">改</button>
    <h1>数组{{arr}}</h1>
    <button @click="changearr">改</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  setup () {
    let name=ref('张三')
    let age =ref('18')
    function changname(){
      name.value='李四'
    }
    function changnage(){
      age.value='2000'
    }
    let person =ref({
      type:'前端',
      salary:300000
    })
    function changesalary(){
      person.value.type='后端'
      person.value.salary="300K"
    }
    let arr=ref([1,2,3,4,5,6])
    function changearr(){
      (arr.value)[2]=3000
    }
    return {
      name,
      age,
      person,
      changnage,
      changname,
      changesalary,
      arr,
      changearr
    }
  }
}
</script>

<style lang="less" scoped>

</style>